<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号文章模板示例</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            background-color: #f7f7f7;
            color: #333;
            line-height: 1.75;
            padding-bottom: 40px;
        }
        /* 容器样式 */
        .article-container {
            max-width: 677px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px 16px 10px;
        }
        /* 标题样式 */
        .article-title {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.3;
            margin-bottom: 16px;
            color: #333;
        }
        /* 正文样式 */
        .article-content {
            font-size: 16px;
            color: #333;
        }
        .article-content p {
            margin-bottom: 24px;
        }
        /* 图片样式 */
        .article-image {
            width: 100%;
            border-radius: 8px;
            margin: 32px 0;
            display: block;
        }
        .image-caption {
            font-size: 14px;
            color: #8c8c8c;
            text-align: center; /* 图片说明居中 */
            margin-top: -28px;
            margin-bottom: 24px;
            text-indent: 0; /* 图片说明取消首行缩进 */
        }
        /* 小标题样式 */
        .subtitle {
            font-size: 18px;
            font-weight: bold;
            margin: 36px 0 16px;
            color: #333;
            padding-left: 4px;
            border-left: 3px solid #4e8cff;
        }
        /* 引用样式 */
        .quote {
            background-color: #f5f7fa;
            border-left: 3px solid #4e8cff;
            padding: 16px 18px;
            margin: 24px 0;
            font-size: 15px;
            color: #666;
        }
        /* 列表样式 */
        .article-list {
            margin: 24px 0 24px 20px;
        }
        .article-list li {
            margin-bottom: 12px;
            color: #333;
        }
        /* 分隔线样式 */
        .divider {
            width: 100%;
            height: 1px;
            background-color: #eee;
            margin: 32px 0;
        }
        /* 装饰性分隔线 */
        .divider-dot {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 32px 0;
        }
        .divider-dot::before,
        .divider-dot::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #eee;
        }
        .divider-dot span {
            padding: 0 12px;
            color: #ccc;
            font-size: 12px;
        }
        /* 强调文本 */
        .highlight {
            color: #e63946;
            font-weight: 500;
        }
        /* 底部引导 */
        .bottom-guide {
            background-color: #f5f7fa;
            padding: 20px;
            border-radius: 8px;
            margin-top: 40px;
            font-size: 15px;
        }
        .guide-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }
        /* 点赞关注引导区 */
        .follow-guide {
            background-color: #f5f7fa;
            border-radius: 8px;
            padding: 24px 20px;
            margin-top: 32px;
            text-align: center;
        }
        .follow-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
            color: #333;
        }
        .follow-content {
            font-size: 15px;
            margin-bottom: 16px;
            line-height: 1.8;
        }
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 16px;
            margin-bottom: 24px; /* 增加按钮与二维码间距 */
        }
        .action-btn {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        .like-btn {
            background-color: #4e8cff;
            color: white;
            border: none;
        }
        .follow-btn {
            background-color: white;
            color: #4e8cff;
            border: 1px solid #4e8cff;
        }
        /* 公众号二维码 */
        .qrcode-container {
            text-align: center;
            margin-top: 20px;
        }
        .official-qrcode {
            width: 160px;
            height: 160px;
            margin: 0 auto;
            border: 1px solid #eee;
            padding: 8px;
            border-radius: 8px;
        }
        .qrcode-desc {
            font-size: 14px;
            color: #666;
            margin-top: 12px;
            line-height: 1.6;
        }
        /* 适配移动端 */
        @media (max-width: 768px) {
            .article-title {
                font-size: 22px;
            }
            .article-content {
                font-size: 15px;
            }
            .subtitle {
                font-size: 17px;
            }
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            .action-btn {
                width: 80%;
            }
            .official-qrcode {
                width: 140px;
                height: 140px;
            }
        }
    </style>
</head>
<body>
    <div class="article-container">
        <!-- 标题 -->
        <h1 class="article-title">如何打造一篇让人眼前一亮的公众号文章排版</h1>
        
        <!-- 标题下方添加分隔线 -->
        <div class="divider"></div>
        
        <!-- 正文内容 -->
        <div class="article-content">
            <p style="text-indent: 2em;">好的排版不是炫技，而是让读者更舒适地获取信息。在微信公众号的阅读场景中，用户更偏爱简洁、清晰、有呼吸感的排版设计。</p>
            
            <img src="../img/BG-YouthDay.png" alt="公众号排版示例" class="article-image">
            <p class="image-caption">图1：优秀公众号排版的视觉层次展示</p>
            
            <!-- 装饰性分隔线 -->
            <div class="divider-dot">
                <span>●●●</span>
            </div>
            
            <h2 class="subtitle">一、基础排版原则</h2>
            
            <p style="text-indent: 2em;">无论是哪种类型的文章，都需要遵循几个核心原则：</p>
            
            <div class="quote">
                排版的本质是信息的梳理，让读者能快速抓住重点，减少阅读阻力。
            </div>
            
            <ul class="article-list">
                <li><strong>留白原则</strong>：行间距保持1.75-2倍，段落间留空行</li>
                <li><strong>一致性原则</strong>：全文字体、颜色、间距保持统一</li>
                <li><strong>层次分明</strong>：通过字号和颜色区分标题与正文</li>
                <li><strong>移动端优先</strong>：避免过宽段落和过小字体</li>
            </ul>
            
            <div class="divider"></div>
            
            <h2 class="subtitle">二、字体与颜色选择</h2>
            
            <p style="text-indent: 2em;">正文推荐使用系统默认字体（无需额外设置），字号15-16px最佳。颜色选择深灰色（#333333）比纯黑（#000000）更易读。</p>
            
            <p style="text-indent: 2em;">强调内容可使用品牌色，如<span class="highlight">这个红色文本</span>用于突出重要信息，但全文重点色不宜超过2种。</p>
            
            <img src="../img/BG-YouthDay.png" alt="颜色搭配示例" class="article-image">
            <p class="image-caption">图2：适合公众号的颜色搭配方案</p>
            
            <!-- 装饰性分隔线 -->
            <div class="divider-dot">
                <span>END</span>
            </div>
            
            <h2 class="subtitle">三、图片处理技巧</h2>
            
            <p>公众号图片建议满足：</p>
            <ol class="article-list">
                <li>宽度统一（推荐900px或677px）</li>
                <li>添加轻微圆角（4-8px）</li>
                <li>图片下方添加简洁图注</li>
                <li>避免使用复杂边框</li>
            </ol>
            
            <div class="divider"></div>
            
            <!-- 底部引导 -->
            <div class="bottom-guide">
                <div class="guide-title">💡 小提示</div>
                <p>完成排版后，一定要用手机预览效果！电脑端的视觉感受和移动端会有明显差异哦。</p>
            </div>

            <!-- 点赞关注引导区 -->
            <div class="follow-guide">
                <div class="follow-title">觉得有用？别忘了互动哦！</div>
                <div class="follow-content">
                    喜欢这篇排版指南的话，<span class="highlight">点赞+在看</span>支持一下吧！<br>
                    关注公众号，回复「排版模板」即可获取10+套精选公众号排版模板，让你的文章更出彩！
                </div>
                <div class="action-buttons">
                    <button class="action-btn like-btn">👍 点赞+在看</button>
                    <button class="action-btn follow-btn">🔍 关注公众号</button>
                </div>
                
                <!-- 公众号二维码 -->
                <div class="qrcode-container">
                    <img src="../img/qrcode_wcjs.jpg" alt="公众号二维码" class="official-qrcode">
                    <p class="qrcode-desc">长按识别二维码关注<br>获取更多排版干货</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>